<template>
  <view class="bangding-grzq">
    <form @submit="editPwd">
      <view class="item_change">
        <view class="item_list">
          <view class="item_phone">
            <input type='number' :placeholder='placeholder_phone' placeholder-class='placeholder'
                   v-model="phone"></input>
          </view>
          <view class="item_password">
            <input type='password' placeholder='请输入密码' placeholder-class='placeholder'
                   v-model="password"></input>
          </view>
          <view class="item_password">
            <input type='password' placeholder='确认新密码' placeholder-class='qr_password'
                   v-model="qr_password"></input>
          </view>
          <view class="item_code">
            <input type='number' placeholder='填写验证码' placeholder-class='placeholder' class="codeIput"
                   v-model="captcha"></input>
            <text class="code font-num" :class="disabled === true ? 'on' : ''" :disabled='disabled'
                  @click="code">
              {{ codeName }}
            </text>
          </view>
        </view>
        <button form-type="submit" class="confirmBnt bg-color">确认绑定</button>
      </view>
    </form>
  </view>
</template>

<script>

import sendVerifyCode from "@/mixins/SendVerifyCode";
import {phoneRegisterReset, verifyCode, registerVerify} from "@/api/api";

export default {
  mixins: [sendVerifyCode],
  data() {
    return {
      placeholder_phone: "填写手机号",
      phone: '13333333333',
      password: '123456',
      qr_password: '123456',
      codeName: '获取验证码',
      captcha: '',
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      key: '',
      authKey: '',
      type: 0,
      vcodeTime: 0
    }
  },
  methods: {
    editPwd: function () {
      let that = this,
          phone = that.phone,
          password = that.password,
          qr_password = that.qr_password,
          captcha = that.captcha;
      if (!phone) return that.$utils.Tips({
        title: '请填写手机号码'
      });
      if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(phone))) return that.$utils.Tips({
        title: '请输入正确的手机号码'
      });
      if (!captcha) return that.$utils.Tips({
        title: "请填写验证码"
      });
      if (!password) return that.$utils.Tips({
        title: that.$t(`请输入新密码`)
      });
      if (qr_password != password) return thats.$utils.Tips({
        title: that.$t(`两次输入的密码不一致！`)
      });
      phoneRegisterReset({
        // account: that.userInfo.phone,
        phone: phone,
        captcha: captcha,
        password: password
      }).then(res => {
        return that.$utils.Tips({
          title: res.message
        }, {
          tab: 3,
          url: "/pages/index/home"
        });
      }).catch(err => {
        return that.$utils.Tips({
          title: err
        });
      });
    },
    success(data) {
      let that = this;
      verifyCode().then(res => {
        console.log(res.data)
        registerVerify(that.phone, 'reset', res.data.key)
            .then(res => {
              that.$utils.Tips({
                title: res.message
              });
              that.sendCode();
            }).catch(err => {
          return that.$utils.Tips({
            title: err
          });
        });
      });
    },
    // 获取验证码
    async code() {
      let that = this;
      if (!that.phone) {
        return that.$utils.Tips({
          title: '请填写手机号码'
        });
      }
      if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) {
        return that.$utils.Tips({
          title: '请输入正确的手机号码'
        });
      }
      // 获取验证码
      verifyCode().then(res => {
        registerVerify(that.phone, 'reset', res.data.key)
            .then(vres => {
              console.log("vres")
              console.log(vres)
              that.$utils.Tips({
                title: vres.data.message
              });
              that.captcha= vres.data.code;// 复制验证
              that.sendCode();
            }).catch(err => {
          return that.$utils.Tips({
            title: err
          });
        });
      });
      return;
    },
  }
}
</script>

<style lang="scss" scoped>
.bangding-grzq {
  min-height: 100vh;
  background: url($baseUrl + '/images/bg/login@2x.png') no-repeat top center;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item_change {
    padding: 100rpx 32rpx 0;
    margin-bottom: 80rpx;
  }

  .item_list {
    padding: 50rpx 0;
  }

  .item_phone {
    padding: 20rpx 12rpx 12rpx 48rpx;
    height: 96rpx;
    margin-top: 20rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    background: url($baseUrl + '/images/login/imput.png') no-repeat top center;
    border: solid 1rpx #f0f0f0;
  }

  .item_password {
    margin-top: 20rpx;
    padding: 20rpx 12rpx 12rpx 48rpx;
    height: 96rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    background: url($baseUrl + '/images/login/imput.png') no-repeat top center;
    border: solid 1rpx #f0f0f0;
  }

  .item_code {
    border: solid 1rpx #f0f0f0;
    margin: 20rpx 0;
    height: 96rpx;
    border-radius: 20rpx;
    padding: 0 48rpx;
    padding-right: 0;
    display: flex;
    align-items: center;
    background: url($baseUrl + '/images/login/imput.png') no-repeat top center;
  }

  .item_code input {
    flex: 1;
  }

  .item_code text {
    text-wrap: nowrap;
    font-size: 35rpx;
    //color: #f0f0f0;
    padding: 25rpx 45rpx;
    background-color: #fff;
    border-radius: 12rpx;
  }

  .item_change .confirmBnt {
    background: #3264ed;;
    font-size: 32rpx;
    width: 580rpx;
    height: 90rpx;
    border-radius: 45rpx;
    color: #fff;
    margin: 92rpx auto 0 auto;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>
